<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 新增了试题 -->
        <div class="btn-wrapper">
          <span style="font-size: 12px; color: pink"
            >说明：目前支持学科和关键字条件筛选</span
          >
          <el-button
            type="button"
            class="el-button el-button--success el-button--small"
            icon="el-icon-edit"
            @click="addQuestion"
          >
            <span>新增试题</span>
          </el-button>
        </div>
        <!-- tab选项卡 -->
        <el-tabs
          v-model="activeName"
          style="margin-top: 15px"
          type="border-card"
        >
          <el-tab-pane
            v-for="item in tabMapOptions"
            :key="item.key"
            :label="item.label"
            :name="item.key"
          >
            <keep-alive>
              <choiceALL v-if="activeName == item.key" :type="item.key" />
            </keep-alive>
          </el-tab-pane>
        </el-tabs>
        <!-- 分页器 -->
      </el-card>
    </div>
  </div>
</template>

<script>
import choiceALL from '../components/choice-all.vue'// 全部
export default {
  components: {
    choiceALL
  },
  data () {
    return {
      tabMapOptions: [
        { label: '全部', key: '3' },
        { label: '待审核', key: '0' },
        { label: '已审核', key: '1' },
        { label: '已拒绝', key: '2' }
      ],
      activeName: '3'
    }
  },
  methods: {
    // 新增试题
    addQuestion () {
      this.$router.push({ path: '/questions/new' })
    }
  }
}
</script>

<style lang="scss" scoped>
.btn-wrapper {
  margin-bottom: 15px;
  display: flex;
  -webkit-box-pack: justify;
  justify-content: space-between;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
</style>
